<template>
    <div class="content">
        <div class="left">
            <div class="top">
                <p class="desc">请在上方空白处书写您的签名</p>
            </div>
            <!--<u-button-->
            <!--text="取消"-->
            <!--type="primary"-->
            <!--@click="cancel"-->
            <!--:customStyle="{-->
            <!--transform: 'rotate(90deg)',-->
            <!--marginBottom: '100rpx',-->
            <!--}"-->
            <!--/>-->
            <div class="bottom">
                <div class="clear">
                    <u--text type="error" text="清除重写" @click="reset"></u--text>
                </div>
                <u-button
                    text="完成"
                    type="primary"
                    @click="confirm"
                    :disabled="!checkSign"
                    :customStyle="{
                        transform: 'rotate(90deg)',
                        marginLeft: '-10rpx',
                    }"
                />
            </div>
        </div>
        <div class="right">
            <sign ref="sign" @onFinish="finish" @onChange="checkSign = true" />
        </div>
    </div>
</template>

<script>
import Sign from '@/components/Sign.vue';
export default {
    name: 'signature',
    components: {
        Sign,
    },
    data() {
        return {
            checkSign: false,
        };
    },
    methods: {
        cancel() {
            uni.navigateBack();
        },
        reset() {
            this.$refs.sign.clear();
        },
        confirm() {
            this.$refs.sign.upload();
        },
        finish(signUrl) {
            uni.$emit('sign-finish', signUrl);
            uni.navigateBack();
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    width: 750rpx;
    height: 100vh;
    display: flex;
    position: relative;
    .left {
        width: 100rpx;
        flex-shrink: 0;
        background: #fff;
        padding-bottom: 100rpx;
        @include flexBox(space-between, flex-start, column);
        .top {
            position: relative;
            .desc {
                color: #aaaaaa;
                transform: rotate(90deg);
                white-space: nowrap;
                position: absolute;
                left: -160rpx;
                top: 200rpx;
            }
        }
        .clear {
            transform: rotate(90deg);
            margin-bottom: 100rpx;
            white-space: nowrap;
        }
    }
    .right {
        flex: 1;
        background: gray;
    }
}
::v-deep .u-popup__content {
    transform: rotate(90deg);
}
.confirm-popup {
    position: absolute;
    transform: rotate(90deg);
}
</style>
